class mask {
    constructor(newSmallBox, newMask, newBigBox) {
        this.smallBox = newSmallBox;
        this.mask = newMask;
        this.bigBox = newBigBox;
    }
    mouseover() {
        let that = this;
        this.smallBox.onmouseover = function() {
            that.mask.style.display = "block";
            that.bigBox.style.display = "block";
        }
    }
    mouseout() {
        let that = this;
        this.smallBox.onmouseout = function() {
            that.mask.style.display = "none";
            that.bigBox.style.display = "none";
        }
    }
    mousemove() {
        let that = this;
        this.smallBox.onmousemove = function(evt) {
            let e = evt || event;
            let left = e.pageX - 259 - that.mask.offsetWidth / 2;
            let top = e.pageY - 184 - that.mask.offsetHeight / 2;
            if (left < 0) {
                left = 0;
            }
            if (top < 0) {
                top = 0;
            }
            let maxleft = that.smallBox.offsetWidth - that.mask.offsetWidth;
            let maxtop = that.smallBox.offsetHeight - that.mask.offsetHeight;
            if (left > maxleft) {
                left = maxleft;
            }
            if (top > maxtop) {
                top = maxtop;
            }
            that.mask.style.left = left + "px";
            that.mask.style.top = top + "px";
            that.bigBox.style.backgroundPositionX = -(that.bigBox.offsetWidth / that.mask.offsetWidth * left) + "px";
            that.bigBox.style.backgroundPositionY = -(that.bigBox.offsetHeight / that.mask.offsetHeight * top) + "px";
        }
    }
}

let oSmallBox = document.getElementsByClassName("sm-img")[0];
let oMask = document.getElementsByClassName("dk-mask")[0];
let oBigBox = document.getElementsByClassName("bg-img")[0];
let m = new mask(oSmallBox, oMask, oBigBox);
m.mouseover();
m.mouseout();
m.mousemove();


$(".goods-group-1 li").click(function() {
    $(this).css({
        border: "2px solid black",
    })
    $(this).children("img").css({
        width: 60,
        height: 77.85
    })
    $(this).siblings().css({
        border: ""
    })
    $(this).siblings().children("img").css({
        width: 64,
        height: 81.85
    })

    $(".swpier li").siblings().css({
        border: ""
    })
    $(".swpier li").siblings().children("img").css({
        width: 76,
        height: 100
    })


    $(".sm-img img").attr("src", $(this).children("img").attr("src"))
    $(".bg-img").css({
        backgroundImage: "url(" + $(this).children("img").attr("src") + ")",
    })
    let str = $(this).children("img").attr("src")
    let x = str.substring(7, 12)
    for (let i = 0; i < $(".swpier img").length; i++) {
        let n = str.replace(x, +x + i)
        $(".swpier img").eq(i).attr("src", n)
    }
})

$(".swpier li").click(function() {
    $(this).css({
        border: "2px solid black",
    })
    $(this).children("img").css({
        width: 72,
        height: 96
    })
    $(this).siblings().css({
        border: ""
    })
    $(this).siblings().children("img").css({
        width: 76,
        height: 100
    })


    $(".sm-img img").attr("src", $(this).children("img").attr("src"))
    $(".bg-img").css({
        backgroundImage: "url(" + $(this).children("img").attr("src") + ")",
    })
})

$(".goods-sku-num li").eq(0).click(function() {
    if ($(".num").html() == 1) {
        $(".goods-sku-num span").html("🚫此商品的最小购买数量为1件")
    } else {
        $(".num").html($(".num").html() - 1)
        $(".goods-sku-num span").html("")
    }
})
$(".goods-sku-num li").eq(2).click(function() {
    $(".num").html(+$(".num").html() + 1)
    $(".goods-sku-num span").html("")
})

$(".goods-ico span").mousemove(function() {
    $(this).css({
        opacity: 1,
    })
})
$(".goods-ico span").mouseout(function() {
    $(this).css({
        opacity: .3,
    })
})

$(".goods-group-2 li").click(function() {
    $(this).attr("class", "")
    $(this).siblings().attr("class", "disabled")
})

let index = 0
$(".to-r").click(function() {
    if (index > -1653.3) {
        index += -413.325;
        $(".sp-recommend-swp ul").css({
            marginLeft: index,
        })
    }

})

$(".to-l").click(function() {
    if (index < 0) {
        index += 413.325;
        $(".sp-recommend-swp ul").css({
            marginLeft: index,
        })
    }
})

$(".sp-recommend-swp li").mouseover(function() {
    $(this).children("img").css({
        border: "2px solid black",
        width: 345,
        padding: 2,
    })
})

$(".sp-recommend-swp li").mouseout(function() {
    $(this).children("img").css({
        border: "",
        width: 343,
        padding: 0,
    })
})

$(function() {
    let url = location.href;
    // console.log(url);
    let index = url.indexOf("DK008");
    let shopId = url.substring(index, +index + 8);
    // console.log(shopId);

    let index1 = url.indexOf("80");
    let shopId1 = url.substring(+index1 + 2, +index1 + 4);
    // console.log(shopId1);
    let num = shopId1 - 1;

    $.ajax({
        type: 'get',
        url: '../common/json/shop.json',
        dataType: 'json',
        success: function(res) {
            var str = res.shop;
            // console.log(str[num])
            // console.log(str[num].id)
            $(".goods-title").html(str[num].title)
            $(".goods-id").html(str[num].id)
            $("#price").html(str[num].price)
            $(".sm-img img").attr("src", str[num].imgUrl)
            $(".bg-img").css({
                backgroundImage: "url(" + str[num].imgUrl + ")"
            })
        }
    })
})

$(".add-car").click(function() {
    let url = location.href;
    // console.log(url);
    let index = url.indexOf("DK008");
    let shopId = url.substring(index, +index + 8);
    // console.log(shopId);
    location.href = "../cart/cart.html?id=" + shopId;
})